<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">任务执行结果</h2>
      <p class="text-gray-400">查看任务执行的结果统计和报告</p>
    </div>
    
    <div class="space-y-6">
      <!-- 结果概览 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-3xl font-bold text-green-400 mb-2">92%</div>
          <div class="text-gray-400">成功率</div>
          <div class="mt-2 h-2 bg-gray-700 rounded-full overflow-hidden">
            <div class="h-full bg-green-400 rounded-full" style="width: 92%"></div>
          </div>
        </div>
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-3xl font-bold cyber-text mb-2">46</div>
          <div class="text-gray-400">总用例数</div>
        </div>
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-3xl font-bold text-green-400 mb-2">42</div>
          <div class="text-gray-400">通过</div>
        </div>
        <div class="glass-effect rounded-xl p-6 tech-card text-center">
          <div class="text-3xl font-bold text-red-400 mb-2">4</div>
          <div class="text-gray-400">失败</div>
        </div>
      </div>

      <!-- 详细结果列表 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-chart-bar mr-2"></i>执行结果详情
        </h3>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="border-b border-gray-700">
                <th class="text-left py-3 px-4 text-gray-300">测试用例</th>
                <th class="text-left py-3 px-4 text-gray-300">状态</th>
                <th class="text-left py-3 px-4 text-gray-300">执行时间</th>
                <th class="text-left py-3 px-4 text-gray-300">错误信息</th>
                <th class="text-left py-3 px-4 text-gray-300">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
                <td class="py-3 px-4 text-white">用户登录验证</td>
                <td class="py-3 px-4">
                  <span class="flex items-center text-green-400">
                    <i class="fas fa-check-circle mr-2"></i>通过
                  </span>
                </td>
                <td class="py-3 px-4 text-gray-400">2.5s</td>
                <td class="py-3 px-4 text-gray-400">-</td>
                <td class="py-3 px-4">
                  <button class="text-tech-blue hover:text-tech-purple">
                    <i class="fas fa-eye"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 任务执行结果页面
</script>

